<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{seriesName}}{{getLangText(label.chartTitle)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<md-field>
					<label>{{getLangText(label.name)}}</label>
					<md-input v-model="wordCloudSeries.name"></md-input>
				</md-field>

                <md-field>
					<label>{{getLangText(label.shape)}}</label>
					<md-select v-model="wordCloudSeries.shape">
                        <md-option :value="item.en" :key="item.en" v-for="item in shape">{{getLangText(item)}}</md-option>
                    </md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.left)}}</label>
					<md-input v-model="wordCloudSeries.left"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.top)}}</label>
					<md-input v-model="wordCloudSeries.top"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.right)}}</label>
					<md-input v-model="wordCloudSeries.right"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.bottom)}}</label>
					<md-input v-model="wordCloudSeries.bottom"></md-input>
				</md-field>
                <md-field>
					<label>{{getLangText(label.width)}}</label>
					<md-input v-model="wordCloudSeries.width"></md-input>
				</md-field>
                <md-field>
					<label>{{getLangText(label.height)}}</label>
					<md-input v-model="wordCloudSeries.height"></md-input>
				</md-field>
                <md-field>
					<label>{{getLangText(label.gridSize)}}</label>
					<md-input v-model="wordCloudSeries.gridSize"></md-input>
				</md-field>
                <md-field>
					<label>{{getLangText(label.rotationStep)}}</label>
					<md-input v-model="wordCloudSeries.rotationStep"></md-input>
				</md-field>
                <div style="display:flex;">
                    <md-field style="width:135px;">
					<label>{{getLangText(label.sizeRange)+getLangText(label.min)}}</label>
					<md-input v-model="wordCloudSeries.sizeRange[0]"></md-input>
				</md-field>
                <md-field style="width:135px;margin-left:8px;">
					<label>{{getLangText(label.sizeRange)+getLangText(label.max)}}</label>
					<md-input v-model="wordCloudSeries.sizeRange[1]"></md-input>
				</md-field>

                </div>

                <div style="display:flex;">
                    <md-field style="width:135px;">
					<label>{{getLangText(label.rotationRange)+getLangText(label.min)}}</label>
					<md-input v-model="wordCloudSeries.rotationRange[0]"></md-input>
				</md-field>
                <md-field style="width:135px;margin-left:8px;">
					<label>{{getLangText(label.rotationRange)+getLangText(label.max)}}</label>
					<md-input v-model="wordCloudSeries.rotationRange[1]"></md-input>
				</md-field>

                </div>
			</div>
            <text-style
            :text-option="wordCloudSeries.textStyle.normal"
            @text-style-result="onTextNormal"
            ></text-style>

            <text-style
            :text-name="getLangText(label.emphasis)"
            :text-option="wordCloudSeries.textStyle.emphasis"
            @text-style-result="onTextEmphasis"
            ></text-style>

		</div>
	</div>
</template>
<script>
	import TextStyle from "@/components/comp/TextStyle";
	export default {
		name: "WordCloudSeries",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			},
			seriesName: {
				type: String,
				default: ""
			}
		},
		components: {
			"text-style": TextStyle,
			
		},
		data: () => ({
			label: {
				chartTitle: { zh: "字符云", en: "wordCloud" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },

				emphasis: { zh: "强调", en: "emphasis" },
                name: { zh: "名称", en: "name" },
                
				left: { zh: "左侧距离", en: "left" },
				top: { zh: "上侧距离", en: "top" },
				right: { zh: "右侧距离", en: "right" },
				bottom: { zh: "下侧距离", en: "bottom" },
				shape: { zh: "形状", en: "shape" },

				rotationRange: { zh: "旋转范围", en: "rotationRange" },

                width: { zh: "宽度", en: "wdith" },
                height: { zh: "高度", en: "height" },

                color: { zh: "图形颜色", en: "color" },
                gridSize:{zh:"网格大小",en:"gridSize"},
                sizeRange:{zh:"大小范围",en:"sizeRange"},
                min:{zh:"最小",en:"min"},
                max:{zh:"最大",en:"max"},
                rotationRange:{zh:"旋转范围",en:"rotationRange"},
                rotationStep:{zh:"旋转间隔",en:"rotationStep"},
			},
			isShow: false,
			wordCloudSeries: {
				type: "wordCould",
				name: "",
				shape: "circle",

				left: "center",
				right: "",
				bottom: "",

				top: "center",

				width: "70%",

				height: "80%",
				gridSize: 8,
				
				sizeRange: [12, 60],

				rotationRange: [-90, 90],

				rotationStep: 45,
				textStyle: {
					normal: {
						color: function() {
							// Random color
							return (
								"rgb(" +
								[
									Math.round(Math.random() * 255),
									Math.round(Math.random() * 255),
									Math.round(Math.random() * 255)
								].join(",") +
								")"
							);
						}
                    },
                    emphasis:{}
				}
			}, //options,
			shape: [
				{ en: "circle", zh: "圆形" },
				{ en: "cardioid", zh: "心形" },
				{ en: "diamond", zh: "钻石" },
				{ en: "triangle-forward", zh: "向前三角形" },
				{ en: "triangle", zh: "三角形" },
				{ en: "pentagon", zh: "五角形" },
				{ en: "star", zh: "星形" }
			],

			

			picker: {
				show: false,
				current: "",
				idx: 0,
				result: ""
			},
			originOption:"",
			isParse:false
		}),

		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				} else {
					this.picker.show = false;
				}
			},
			wordCloudSeries:{
            deep:true,
            handler(){
			   if(this.isShow&&!this.isParse)
			   this.$emit("series-result", JSON.parse(JSON.stringify(this.wordCloudSeries)));
            }
        }
		},
		methods: {
			onTextNormal(result){
                this.wordCloudSeries.textStyle.normal=result;
            },
            onTextEmphasis(result){
this.wordCloudSeries.textStyle.emphasis=result;
            },

			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
                    this.wordCloudSeries.textStyle.normal.color=function() {
							// Random color
							return (
								"rgb(" +
								[
									Math.round(Math.random() * 255),
									Math.round(Math.random() * 255),
									Math.round(Math.random() * 255)
								].join(",") +
								")"
							);
						};
					this.$emit("series-result", JSON.parse(JSON.stringify(this.wordCloudSeries)));
				}
			},
			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				this.isParse=true;
				for (var key in this.option) {
					this.wordCloudSeries[key] = this.option[key];
				}
				this.originOption=JSON.stringify(this.wordCloudSeries);
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},colseOption() {
				this.isShow = false;
				if (this.originOption != JSON.stringify(this.wordCloudSeries)) {
					this.$emit("series-result", JSON.parse(JSON.stringify(this.wordCloudSeries)));
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
		},
		beforeDestroy() {
			this.offEvent();
		}
	};
</script>
